<!-- 首页 -->
<template>
	<view class="container">
		<view class="c-header" :style="{'height':`${menuBarHeight}px`,'padding-top':`${menuHeight}px`}">
			<view class="header">
				<image src="/static/logo.jpg" mode="widthFix" :style="{'width':`${menuHeight+10}px`}"></image>
				<text class="yunfeifenti">潇湘键盘</text>
			</view>
		</view>
		<view class="p-header" :style="{'height':`${menuBarHeight}px`}">

		</view>
		<view class="c-banner">
			<view class="banner">
				<u-swiper :list="bannerList" autoplay height="100%" circular @change="e => (current = e.current)"
					@click="toBannerPages">
					<!-- 自定义指示器 -->
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in bannerList" :key="index"
							:class="{ 'indicator--active': index === current }"></view>
					</view>
				</u-swiper>
			</view>

			<view class="p-column">
				<!-- <view class="c-first-line"></view> -->
				<view class="c-column">
					<view class="column_item" v-for="item in columnList" :key="item.id" @click="toColumnPages(item)">
						<image :src="baseURL + item.img" mode=""></image>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="c-last-line"></view>
			</view>
		</view>

		<view class="bg-white">
			<view class="flex align-center padding-top padding-lr-sm" v-if="active">
				<text class="text-purple text-xxl text-bold padding-right-sm yunfeifenti">最新活动</text>
				<u-notice-bar :text="active.title+'-'+active.desc" url="/pages/pages_index/inside/active" mode="link"
					color="#6739b6" bg-color="rgba(0,0,0,0)"></u-notice-bar>
			</view>
			<view class="cu-list grid col-4 no-border">
				<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" @click="handleColumnClick(index)">
					<view :class="[item.cuIcon,item.color]"></view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 优秀教师 -->
		<!-- 	<view class="s-padding">
			<view class="c-strip">
				<view class="strip" @click="toGoodTeach">
					<view class="strip-title">
						<text class="strip-title_headline">优秀教师</text>
						<text class="strip-title_hint">{{goodInfo.teacher.name}}</text>
					</view>
					<view class="strip-info">
						<view class="strip-info_content">
							<text>{{goodInfo.teacher.title}}</text>
						</view>
					</view>
					<view class="strip-image">
						<image :src="baseURL + goodInfo.teacher.img" class="strip-image_avatar" mode=""></image>
						<image src="/static/good.png" class="strip-image_good" mode=""></image>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 优秀学生 -->
		<!-- <view class="s-padding">
			<view class="c-strip">
				<view class="strip" @click="toGoodStudent">
					<view class="strip-title">
						<text class="strip-title_headline">优秀学生</text>
						<text class="strip-title_hint">{{goodInfo.student.name}}</text>
					</view>
					<view class="strip-info">
						<view class="strip-info_content">
							<text>{{goodInfo.student.title}}</text>
						</view>

					</view>
					<view class="strip-image">
						<image :src="baseURL + goodInfo.student.img" class="strip-image_avatar" mode=""></image>
						<image src="/static/good.png" class="strip-image_good" mode=""></image>
					</view>
				</view>
			</view>
		</view> -->
		<view class="s-padding">
			<view class="c-video">
				<video class="video" loop controls="false" :src="videoSource" autoplay></video>
			</view>
		</view>
		<view class="s-padding">
			<view class="c-headline" v-if="gameNowList.length>0">
				<view class="headline-content">
					<text style="color: #333;">实时赛事</text>
				</view>
			</view>
		</view>
		<view class="s-padding">
			<view class="c-strip-game" v-if="gameNowList.length>0">
				<view class="strip-game-item" v-for="item in gameNowList" :key="item.id"
					@click="toGameDivisionDetail(item)" :style="{'background-image':`url(${baseURL + item.img})`}">
					<view class="p-game-item"></view>
					<view class="strip-game-info">
						<text class="strip-game-info_title">{{item.type_name}}</text>
						<text
							class="strip-game-info_subtitle">{{item.round_nums_name + '-' +item.area_group_name}}</text>
						<!-- <text class="strip-game-info_hint" v-if="item.match_status==1">火热比赛中</text> -->
					</view>
				</view>
			</view>
		</view>
		<view class="s-padding">
			<view class="c-headline" v-if="testRichText">
				<view class="headline-content">
					<text style="color: #333;">考级介绍</text>
				</view>
			</view>
		</view>
		<view class="s-padding">
			<view class="c-strip-test" v-if="testRichText" @click="switchTab('test')">
				<scroll-view scroll-y="true" class="strip-test-item">
					<mp-html :content="testRichText" />
				</scroll-view>
			</view>
		</view>
		<view style="height: 30rpx;">

		</view>
	</view>
</template>

<script>
	export default {
		name: "index",
		data() {
			return {
				cuIconList: [{
					cuIcon: 'cuIcon-searchlist',
					color: 'text-red',
					name: '参赛查询'
				}, {
					cuIcon: 'cuIcon-upstage',
					color: 'text-orange',
					name: '成绩查询'
				}, {
					cuIcon: 'cuIcon-selection',
					color: 'text-yellow',
					name: '优秀教师'
				}, {
					cuIcon: 'cuIcon-friendfamous',
					color: 'text-olive',
					name: '优秀学生'
				}],
				// 推荐活动
				active: {},
				// 考级介绍
				testRichText: null,
				// 视频地址
				videoSource: null,
				// 轮播下标
				current: 0,
				// 轮播图全数据
				bannerData: [],
				// 轮播图
				bannerList: [],
				// 优秀教师和学生
				goodInfo: {},
				// 实时赛事
				gameNowList: [],
				columnList: [],

			}
		},
		onLoad() {
			this.getBanner()
			this.getIndexColumn()
			this.getGoodList()
			this.getNowGameList()
			this.getSource("index_advert_video")
			this.getSource("index_examgrade_des")
			this.getRecommendActive()
		},
		onShareAppMessage() {
			return {
				title: '潇湘键盘',
				path: '/pages/pages_index/index'
			}
		},
		onShareTimeline() {},
		methods: {
			handleColumnClick(index) {
				switch (index) {
					case 0:
						this.navigateTo('/pages/pages_index/inside/searchSignUp')
						break;
					case 1:
						this.navigateTo('/pages/pages_index/inside/searchGrade')
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/pages_index/inside/goodTeach?id=" + this.goodInfo.teacher.id
						})
						break;
					case 3:
						uni.navigateTo({
							url: "/pages/pages_index/inside/goodStudent?id=" + this.goodInfo.student.id
						})
						break;
				}
			},
			// 获取推荐活动
			getRecommendActive() {
				this.$http.getRecommendActive().then(res => {
					this.active = res.data[0] || null
				})
			},
			// 获取栏目
			getIndexColumn() {
				this.$http.getIndexColumn().then(res => {
					this.columnList = res
				})
			},
			// 点击分类栏跳转
			toColumnPages(param) {
				this.navigateTo("/pages/pages_game/gameDetail?id=" + param.match_type_id)
			},
			// banner点击跳转
			toBannerPages() {
				if (!this.bannerData[this.current].match_type_id) return
				this.navigateTo("/pages/pages_game/gameDetail?id=" + this.bannerData[this.current].match_type_id)
			},
			// 跳转赛区
			toGameDivisionDetail(params) {
				let {
					type_id,
					round_nums_id,
					area_group_id
				} = params
				uni.setStorageSync('signUp', {
					type_id,
					round_nums_id,
					area_group_id
				})
				this.navigateTo(
					`/pages/pages_game/gameDivisionDetail?name=${params.area_group_name}&id=${params.area_group_id}`)
			},
			// 获取视频和考级介绍
			getSource(param) {
				this.$http.getSource({
					name: param
				}).then(res => {
					if (param == 'index_advert_video') {
						this.videoSource = this.baseURL + res.value
					} else if (param == 'index_examgrade_des') {
						this.testRichText = res.value
					}
				})
			},
			// 获取当前赛事
			getNowGameList() {
				this.$http.getNowGameList().then(res => {
					this.gameNowList = res
				})
			},
			// 获取优秀教师和学生
			getGoodList() {
				this.$http.getGoodList().then(res => {
					this.goodInfo = res
				})
			},
			// 获取轮播图
			getBanner() {
				this.$http.getBanner().then(res => {
					this.bannerData = res
					for (let item of res) {
						this.bannerList.push(this.baseURL + item.img)
					}
				})
			},
			// 优秀教师介绍页
			toGoodTeach() {
				uni.navigateTo({
					url: "/pages/pages_index/inside/goodTeach?id=" + this.goodInfo.teacher.id
				})
			},
			// 优秀学生介绍页
			toGoodStudent() {
				uni.navigateTo({
					url: "/pages/pages_index/inside/goodStudent?id=" + this.goodInfo.student.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	// @import url('~@/static/font/yunfeifenti.css');
	// .yunfeifenti{
	// 	font-family: yunfeifenti;
	// }
	.container {
		padding: 0;
		background-color: #e2e2e2;

		.s-padding {
			width: 100%;
			padding: 0 25rpx;
			box-sizing: border-box;
		}

		.lecture-wapper {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.lecture-content {
				width: 48%;
				height: 100rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				background-color: #fff;
				font-size: 36rpx;
				font-weight: bold;
				border-radius: 10rpx;
				box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>text {
					letter-spacing: 0.2em;
				}
			}
		}

		.c-header {
			width: 100%;
			background-color: #fff;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999;

			.header {
				width: 100%;
				height: 100%;
				padding-left: 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				&>text {
					font-size: 36rpx;
					font-weight: 500;
					padding-left: 30rpx;
				}
			}
		}

		.c-banner {
			position: relative;
			height: 580rpx;
			background-color: #fff;
			margin-bottom: 130rpx;
			box-shadow: 0 0 15rpx 0 rgba(0, 0, 0, 0.25);
			border-bottom-left-radius: 15rpx;
			border-bottom-right-radius: 15rpx;

			.p-column {
				width: 100%;
				position: absolute;
				bottom: -100rpx;
				// padding: 0 25rpx;
				box-sizing: border-box;
				background: rgba(255, 255, 255, 0.5);
				/* 半透明背景 */
				backdrop-filter: blur(10px);
				/* 背景模糊 */
				// border-radius: 10px;
				/* 可选：圆角 */
				padding: 20px;
				/* 可选：内边距 */
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				/* 可选：阴影 */
			}

			.banner {
				width: 100%;
				height: 450rpx;
				margin-bottom: 30rpx;

				.indicator {
					@include flex(row);
					justify-content: center;

					&__dot {
						width: 18px;
						height: 8rpx;
						border-radius: 18rpx;
						background-color: rgba(255, 255, 255, 0.35);
						margin: 0 5rpx;
						transition: background-color 0.3s;
					}

					&--active {
						background-color: #ffffff;
					}
				}
			}
		}



		.c-column {
			width: 100%;
			display: flex;
			justify-content: space-around;
			// padding: 40rpx 0;
			box-sizing: border-box;
			// background-color: #fff;
			// background-position: -40rpx -50rpx;
			// box-shadow: 0 0 15rpx 0 rgba(0, 0, 0, 0.25);
			// border-radius: 10rpx;

			.column_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				// font-weight: bold;

				&>image {
					width: 100rpx;
					height: 100rpx;
				}

			}
		}


		.c-video {
			width: 100%;
			padding: 15rpx;
			box-sizing: border-box;
			margin-top: 40rpx;
			overflow: hidden;
			background-color: #fff;
			margin-bottom: 30rpx;

			.video {
				width: 100%;
				overflow: hidden;
			}
		}

		.c-strip {
			width: 100%;
			height: 200rpx;
			margin-top: 30rpx;
			box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
			border-radius: 15rpx;
			background-color: #333;
			// border: 2rpx solid #03347d;
			overflow: hidden;



			.strip {
				width: 100%;
				height: 100%;
				background-color: #fff;
				padding: 0 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.strip-title {
					display: flex;
					flex-direction: column;

					.strip-title_headline {
						font-size: 56rpx;
						font-weight: bold;
						font-family: "楷体", "楷体_GB2312";
						text-shadow: 3rpx 3rpx #eee;
					}

					.strip-title_hint {
						font-size: 34 .0rpx;
						color: #999;
					}
				}

				.strip-info {
					display: flex;
					align-items: center;

					.strip-info_content {
						width: 200rpx;

						display: flex;
						flex-direction: column;

						&>text {
							overflow: hidden; //溢出内容隐藏
							text-overflow: ellipsis; //文本溢出部分用省略号表示
							display: -webkit-box; //特别显示模式
							-webkit-line-clamp: 2; //行数
							line-clamp: 2;
							-webkit-box-orient: vertical; //盒子中内容竖直排列
						}
					}



				}

				.strip-image {
					width: 150rpx;
					position: relative;

					.strip-image_avatar {
						width: 100rpx;
						height: 100rpx;
						margin: 0 10rpx;
						box-shadow: 0 0 5rpx 0 rgba(0, 0, 0, 0.2);
						border: 3rpx solid #333;
						border-radius: 5rpx;
					}

					.strip-image_good {
						width: 60rpx;
						height: 60rpx;
						position: absolute;
						top: -20rpx;
						right: 0;
					}

					.strip-image_more {
						width: 50rpx;
						height: 90rpx;
					}
				}
			}
		}

		.c-active {
			width: 100%;
			height: 200rpx;
			margin-top: 30rpx;
			box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
			border-radius: 15rpx;
			background-color: #333;
			// border: 2rpx solid #03347d;
			overflow: hidden;

			.active {
				width: 100%;
				height: 100%;
				background-color: #fff;
				padding: 0 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.active-title {
					width: 40%;
					font-size: 56rpx;
					font-weight: bold;
					font-family: "楷体", "楷体_GB2312";
					text-shadow: 3rpx 3rpx #eee;
					flex-shrink: 0;
				}

				.active-info {
					width: 60%;
					display: flex;
					flex-direction: column;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}

		.c-strip-game {
			width: 100%;

			// box-shadow: 0 0 15rpx 0 rgba(255, 255, 255, 0.25);
			.strip-game-item {
				position: relative;
				width: 100%;
				height: 234rpx;
				padding: 0 25rpx;
				box-sizing: border-box;
				background-color: #fff;
				background-size: 100% 100%;
				background-position: center center;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 25rpx;
				box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
				border-radius: 15rpx;
				overflow: hidden;

				.p-game-item {
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.22);
					position: absolute;
					left: 0;
				}

				.strip-game-info {
					width: 100%;
					position: absolute;
					left: 0;
					padding: 0 20rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: baseline;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;

					&>text {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						text-shadow: 0 0 20rpx #333;
						color: #fff;
						display: block;
						width: 100%;
						display: block;
					}

					.strip-game-info_title {
						text-align: center;
						font-size: 45rpx;
					}

					.strip-game-info_subtitle {
						text-align: right;
						flex-shrink: 0;
						font-size: 30rpx;
					}

					.strip-game-info_hint {
						font-size: 34rpx;
						color: #333;
						font-weight: bold;
						text-shadow: none;
					}
				}


			}
		}

		.c-strip-test {
			width: 100%;
			max-height: 740rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;
			overflow: hidden;

			.strip-test-item {
				width: 100%;
				height: 100%;
				overflow-x: scroll;
				overflow-y: scroll;
				pointer-events: none;
			}
		}
	}
</style>